<template>
    <div>
        <H1>优惠券列表</H1>
        优惠券名称: <input type="text" v-model="info.name">
        <input type="button" value="查询" @click="GetList">
        <input type="button" value="批量删除" @click="Dellist" style="background-color: brown;">
        <input type="button" value="批量可用" @click="Updatelist(1)" style="background-color:chartreuse ;">
        <input type="button" value="批量不可用" @click="Updatelist(0)" style="background-color:chocolate ;">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="allcheck" @change="checked"></td> 
                    <td>优惠券标题</td>
                    <td>优惠券副标题</td>
                    <td>图片</td>
                    <td>剩余数量</td>
                    <td>须知</td>
                    <td>状态</td>
                    <td>优惠券类型</td>
                    <td>操作</td>
                </tr>
                <tr v-for="value in infoo.list">
                    <td><input type="checkbox"  v-model="check" :value="value.id"></td>
                    <td>{{value.name}}</td>
                    <td>{{value.oname}}</td>
                    <td><img :src="value.img" height="50px" width="50px"></td>
                    <td>{{value.num}}</td>
                    <td>{{value.tips}}</td>
                    <td>{{value.state==1?"可用":"不可用"}}</td>
                    <td>{{value.fname}}</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>总条数:{{infoo.totalnum}}</span>
        <span>总页数:{{infoo.totalpage}}</span>
        <span>当前页:{{info.pageindex}}/{{infoo.totalpage}}</span>
        <input type="button" value="首页" @click="fn(1)">
        <input type="button" value="上一页" @click="fn(info.pageindex-1)">
        <input type="button" v-for="o in infoo.totalpage" :value="o" @click="fn(o)">
        <input type="button" value="下一页" @click="fn(info.pageindex+1)">
        <input type="button" value="尾页" @click="fn(infoo.totalpage)">
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import router from '@/router';


let allcheck=ref();

let check:any=ref({});


let info:any=ref({
    name:"",
    pageindex:1,
    pagesize:3
})
let infoo:any=ref({
    list:[],
    totalnum:"",
    totalpage:""
})
onMounted(()=>{
    GetList();
})
const GetList=()=>{
    axios({
        url:'https://localhost:7058/api/Free/GetFreeList',
        method:'get',
        params:info.value
    })
    .then((res)=>{
        console.log(res);
        infoo.value=res.data
    })
    .catch((err)=>{
        console.log((err))
    })
}

const Dellist=()=>{
    if(check.value==""){
        alert("未选择数据");
        return;
    }
    let f=confirm("确认删除吗");
    if(f){
        axios({
        url:'https://localhost:7058/api/Free/DelList',
        method:'delete',
        params:{
            ids:check.value.toString()
        }
    })
    .then((res)=>{
       if(res.data>0){
        alert("删除成功");
        allcheck.value=false;
        check.value=[];
        GetList();
       }
    })
    }
}

const Updatelist=(state:any)=>{
    if(check.value==""){
        alert("未选择数据");
        return;
    }
    let f=confirm("确认修改吗");
    if(f){
        axios({
        url:'https://localhost:7058/api/Free/UpdateList',
        method:'get',
        params:{
            ids:check.value.toString(),
            state:state
        }
    })
    .then((res)=>{
       if(res.data>0){
        alert("修改成功");
        allcheck.value=false;
        check.value=[];
        GetList();
       }
    })
    }
}

const fn=(num:any)=>{
    if(num<1){
        info.value.pageindex=1;
        return;
    }
    if(num>infoo.value.totalpage){
        info.value.pageindex=infoo.value.totalpage
        return;
    }
    info.value.pageindex=num;
    GetList()
}

const checked=()=>{
    if(allcheck.value==true){
        check.value=infoo.value.list.map((item:any)=>{
            return item.id
        })
    }
    else{
        check.value=[];
    }
}
</script>

<style scoped>

</style>